<template>
    <div class="invest-wrap">
        <ul v-if="syzlistData && syzlistData.length">
            <li v-for="(item, index) in syzlistData" class="invest-wrap-li" :key="index">
                <nuxt-link :to="linkmatch(item.investType, item.investRecordId, item.orderId)">
                    <div class="invest-wrap-div">
                        <p class="product-title"><span>{{item.productName}}</span><span
                                v-if="item.variablePeriod" class="lable">浮动期限</span><span v-if="item.supportCzz === '1'" class="lable">支持债转</span></p>
                        <ul class="invest-wrap-div-ul clearfix">
                            <li class="invest-wrap-div-li left">
                                <p class="cont">{{formatMoney(item.earning)}}</p>
                                <p class="detail">{{item.productStatus === 'DFK' ? '参考回报' : '待收收益'}}</p>
                            </li>
                            <li class="invest-wrap-div-li middle">
                                <p class="cont">{{formatMoney(item.collectingPrincipal)}}</p>
                                <p class="detail">{{item.productStatus === 'DFK' ? '冻结金额' : '待收本金'}}</p>
                            </li>
                            <li class="invest-wrap-div-li right">
                                <p class="cont">{{item.productStatus === 'DFK' ? item.investProgress + '%' : toDateStr(item.repaymentDate)}}</p>
                                <p class="detail">{{item.productStatus === 'DFK' ? '筹集进度' : '下期到期日'}}</p>
                            </li>
                        </ul>
                        <div class="huikuan-detail" v-if="item.productStatus === 'HKZ' && item.nextTermPaymentAmt">
                            <div class="cont clearfix">
                                <p class="left">下期回款金额 <span class="money">{{formatMoney(item.nextTermPaymentAmt)}}元</span></p>
                                <p class="right">所在期数 <span class="money">{{item.currentInstallment + '/' + item.maxInstallment}}</span></p>
                            </div>
                        </div>
                    </div>
                </nuxt-link>
            </li>
        </ul>
        <div class="no-records" v-if="syzlistData && syzlistData.length === 0 && syzquery">
            <img src="~/assets/img/no-records.png" class="detail-img" />
            <p class="detail">暂无记录</p>
        </div>
        <div class="isloding" v-if="!syzquery && loding">
            <mt-spinner :type="3" :size="30"></mt-spinner>
        </div>
    </div>
</template>
<script>
  import formatMoney from '~/helper/formatMoney'
  import conv from '~/helper/conv'
  export default {
    name: 'syz-list',
    props: {
      syzlistData: {
        default: () => []
      },
      loding: {
        default: false
      },
      syzquery: {
        default: false
      }
    },
    data () {
      return {}
    },
    methods: {
      formatMoney (money) {
        if (money) {
          return formatMoney.formatMoney(money)
        }
        return money
      },
      toDateStr (date) {
        if (date) {
          return conv.toDateStr(date)
        } else {
          return '--'
        }
      },
      linkmatch (investType, investRecordId, orderId) {
        if (investType === '1') { // 优易计划是1  网贷是0  债转是2？？债转跳什么详情
          return '/cfmatchlist/' + orderId
        } else {
          return '/bid/' + investRecordId
        }
      }
    }
  }
</script>
<style lang='sass' src='~/assets/sass/invest-list.sass'></style>